<template>
  <div class="image-uploader">
    <!-- 图片上传区域 -->
    <el-upload v-for="(url, index) in value" :key="index" class="avatar-uploader" action="#" :show-file-list="false"
      :http-request="uploadFileToBackend" :before-upload="beforeAvatarUpload" :disabled="value.length >= 9 && !url">
      <img v-if="url" :src="url" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      <span v-if="url" class="delete-icon" @click.stop="removeImage(index)">×</span>
    </el-upload>

    <!-- 添加新图片的占位符 -->
    <el-upload v-if="value.length < 9" class="avatar-uploader" action="#" :show-file-list="false"
      :http-request="uploadFileToBackend" :before-upload="beforeAvatarUpload">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import { upload } from '@/api/upload';

export default {
  name: 'BatchImageUpload',
  props: {
    value: {
      type: Array,
      default: () => [] // 默认值为空数组
    }
  },
  methods: {
    /**
     * 上传前校验
     */
    beforeAvatarUpload(file) {
      if (this.value.length >= 9) {
        this.$message.warning('最多只能上传9张图片！');
        return false;
      }

      const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 5; // 限制大小为 5MB

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG、PNG、GIF 或 BMP 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }

      return isJPG && isLt2M;
    },

    /**
     * 自定义上传方法
     */
    async uploadFileToBackend(file) {
      const formData = new FormData();
      formData.append('file', file.file);

      try {
        const response = await upload(formData); // 调用封装的上传方法

        if (this.value.length < 9) {
          const newValue = [...this.value, response]; // 追加新图片URL
          this.$emit('input', newValue); // 更新父组件
        } else {
          this.$message.warning('最多只能上传9张图片！');
        }
      } catch (error) {
        console.error('上传失败:', error);
        this.$message.error('文件上传失败，请稍后重试！');
      }
    },

    /**
     * 删除图片
     */
    removeImage(index) {
      const newValue = [...this.value];
      newValue.splice(index, 1); // 删除指定索引的图片
      this.$emit('input', newValue); // 更新父组件
    }
  }
};
</script>

<style scoped>
.image-uploader {
  display: flex;
  flex-wrap: wrap;
}

.avatar-uploader {
  margin-right: 10px;
  margin-bottom: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 75px;
  height: 75px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 75px;
  height: 75px;
  line-height: 75px;
  text-align: center;
}

.avatar {
  width: 75px;
  height: 75px;
  display: block;
}

.delete-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #fff;
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>